<template>
    <div class="threeS-clock-light">
        <div class="digits" ref="threeSClock"></div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    nextTick,
    ref,
    onMounted,
    onUnmounted,
    watch,
} from "vue";

export default defineComponent({
    props: {
        glass: {
            type: Boolean,
            default: false,
        },
    },
    setup(props) {
        // 时间DOM
        const threeSClock: any = ref(null);
        // 定时器
        let timer: any = null;

        /**
         * 填入时间
         * @param {String} time - 时间
         * @param {HTMLElement} timerClock - 填入时间的DOM
         * @returns 无
         */
        function clocknum(time: string, timerClock: HTMLElement): void {
            timerClock.innerHTML = "";

            var html = "";
            var strarr: any[] = time.toString().split("");
            var digit_to_name = "zero one two three four five six seven eight nine".split(
                " "
            );
            for (var i = 0; i < strarr.length; i++) {
                if (strarr[i] == ":") {
                    html += '<div class="dot"></div>';
                } else {
                    var clasname = digit_to_name[strarr[i]];
                    html +=
                        '<div class="' +
                        clasname +
                        '">' +
                        '<span class="d1"></span>' +
                        '<span class="d2"></span>' +
                        '<span class="d3"></span>' +
                        '<span class="d4"></span>' +
                        '<span class="d5"></span>' +
                        '<span class="d6"></span>' +
                        '<span class="d7"></span>' +
                        "</div>";
                }
            }

            timerClock.innerHTML = html;
        }

        /**
         * 获得时间
         * @returns {String} 当前时间
         */
        function getTime(): string {
            const date = new Date();

            const hour = date.getHours();
            const minute = date.getMinutes();
            return (
                (hour >= 10 ? hour : "0" + hour) +
                ":" +
                (minute >= 10 ? minute : "0" + minute)
            );
        }

        /**
         * 获得时间DOM
         * @returns {HTMLElement} 当前时间DOM
         */
        function handleTime() {
            return new Promise((resolve) => {
                nextTick(() => {
                    resolve(threeSClock.value);
                });
            });
        }

        /**
         * 初始化
         */
        async function init(): Promise<void> {
            const timerClock: any = await handleTime();

            clocknum(getTime(), timerClock);
            timer = setInterval(() => {
                clocknum(getTime(), timerClock);
            }, 20000);
        }

        /**
         * 是否显示时钟组件
         */
        watch(
            () => props.glass,
            (value) => {
                // true，清除定时器
                if (value) {
                    if (timer !== null) {
                        clearInterval(timer);
                    }
                }
                // false，初始化
                else {
                    init();
                }
            }
        );

        onMounted(() => {
            init();
        });

        onUnmounted(() => {
            if (timer !== null) {
                clearInterval(timer);
            }
        });
        return {
            threeSClock,
        };
    },
});
</script>

<style lang="less">
@fontSize: 5px;
.threeS-clock-light {
    position: relative;

    width: 100%;
    height: 100%;
    text-align: center;

    .digits div {
        text-align: left;
        position: relative;
        width: 28px;
        height: 50px;
        display: inline-block;
        margin: 0 8px;
    }
    .digits div span {
        background-color: #ffffff;
        border-color: #ffffff;
    }

    .digits div span {
        opacity: 0;
        position: absolute;
        -webkit-transition: 0.25s;
        -moz-transition: 0.25s;
        transition: 0.25s;
    }
    .digits div span:before,
    .digits div span:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: @fontSize solid transparent;
    }

    .digits .d1 {
        height: @fontSize;
        width: 16px;
        top: 0;
        left: 6px;
    }
    .digits .d1:before {
        border-width: 0 @fontSize @fontSize 0;
        border-right-color: inherit;
        left: -@fontSize;
    }
    .digits .d1:after {
        border-width: 0 0 @fontSize @fontSize;
        border-left-color: inherit;
        right: -@fontSize;
    }

    .digits .d2 {
        height: @fontSize;
        width: 16px;
        top: 24px;
        left: 6px;
    }
    .digits .d2:before {
        border-width: 3px 4px 2px;
        border-right-color: inherit;
        left: -8px;
    }
    .digits .d2:after {
        border-width: 3px 4px 2px;
        border-left-color: inherit;
        right: -8px;
    }

    .digits .d3 {
        height: @fontSize;
        width: 16px;
        top: 48px;
        left: 6px;
    }
    .digits .d3:before {
        border-width: @fontSize @fontSize 0 0;
        border-right-color: inherit;
        left: -@fontSize;
    }
    .digits .d3:after {
        border-width: @fontSize 0 0 @fontSize;
        border-left-color: inherit;
        right: -@fontSize;
    }

    .digits .d4 {
        width: @fontSize;
        height: 14px;
        top: 7px;
        left: 0;
    }
    .digits .d4:before {
        border-width: 0 @fontSize @fontSize 0;
        border-bottom-color: inherit;
        top: -@fontSize;
    }
    .digits .d4:after {
        border-width: 0 0 @fontSize @fontSize;
        border-left-color: inherit;
        bottom: -@fontSize;
    }

    .digits .d5 {
        width: @fontSize;
        height: 14px;
        top: 7px;
        right: 0;
    }
    .digits .d5:before {
        border-width: 0 0 @fontSize @fontSize;
        border-bottom-color: inherit;
        top: -@fontSize;
    }
    .digits .d5:after {
        border-width: @fontSize 0 0 @fontSize;
        border-top-color: inherit;
        bottom: -@fontSize;
    }

    .digits .d6 {
        width: @fontSize;
        height: 14px;
        top: 32px;
        left: 0;
    }
    .digits .d6:before {
        border-width: 0 @fontSize @fontSize 0;
        border-bottom-color: inherit;
        top: -@fontSize;
    }
    .digits .d6:after {
        border-width: 0 0 @fontSize @fontSize;
        border-left-color: inherit;
        bottom: -@fontSize;
    }

    .digits .d7 {
        width: @fontSize;
        height: 14px;
        top: 32px;
        right: 0;
    }
    .digits .d7:before {
        border-width: 0 0 @fontSize @fontSize;
        border-bottom-color: inherit;
        top: -@fontSize;
    }
    .digits .d7:after {
        border-width: @fontSize 0 0 @fontSize;
        border-top-color: inherit;
        bottom: -@fontSize;
    }

    /* 1 */
    .digits div.one .d5,
    .digits div.one .d7 {
        opacity: 1;
    }

    /* 2 */
    .digits div.two .d1,
    .digits div.two .d5,
    .digits div.two .d2,
    .digits div.two .d6,
    .digits div.two .d3 {
        opacity: 1;
    }

    /* 3 */
    .digits div.three .d1,
    .digits div.three .d5,
    .digits div.three .d2,
    .digits div.three .d7,
    .digits div.three .d3 {
        opacity: 1;
    }

    /* 4 */
    .digits div.four .d5,
    .digits div.four .d2,
    .digits div.four .d4,
    .digits div.four .d7 {
        opacity: 1;
    }

    /* 5 */
    .digits div.five .d1,
    .digits div.five .d2,
    .digits div.five .d4,
    .digits div.five .d3,
    .digits div.five .d7 {
        opacity: 1;
    }

    /* 6 */
    .digits div.six .d1,
    .digits div.six .d2,
    .digits div.six .d4,
    .digits div.six .d3,
    .digits div.six .d6,
    .digits div.six .d7 {
        opacity: 1;
    }

    /* 7 */
    .digits div.seven .d1,
    .digits div.seven .d5,
    .digits div.seven .d7 {
        opacity: 1;
    }

    /* 8 */
    .digits div.eight .d1,
    .digits div.eight .d2,
    .digits div.eight .d3,
    .digits div.eight .d4,
    .digits div.eight .d5,
    .digits div.eight .d6,
    .digits div.eight .d7 {
        opacity: 1;
    }

    /* 9 */
    .digits div.nine .d1,
    .digits div.nine .d2,
    .digits div.nine .d3,
    .digits div.nine .d4,
    .digits div.nine .d5,
    .digits div.nine .d7 {
        opacity: 1;
    }

    /* 0 */
    .digits div.zero .d1,
    .digits div.zero .d3,
    .digits div.zero .d4,
    .digits div.zero .d5,
    .digits div.zero .d6,
    .digits div.zero .d7 {
        opacity: 1;
    }

    /* dot */
    .digits div.dot {
        width: 6px;
        animation-name: lineLeftAnimate;
        -webkit-animation-name: lineLeftAnimate;

        animation-duration: 1s;
        -webkit-animation-duration: 1s;

        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;

        animation-direction: alternate;
        -webkit-animation-direction: alternate;

        animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
    }
    @keyframes lineLeftAnimate {
        50% {
            opacity: 0;
            // width: 0;
        }

        100% {
            opacity: 1;
            // width: 27.1875rem;
        }
    }

    @-webkit-keyframes lineLeftAnimate {
        50% {
            opacity: 0.5;
            width: 0;
        }

        100% {
            opacity: 1;
            width: 27.1875rem;
        }
    }
    .dot:before,
    .dot:after {
        width: @fontSize;
        height: @fontSize;
        content: "";
        position: absolute;
        left: 0;
        top: 14px;

        background-color: #ffffff;
    }

    .dot:after {
        top: 34px;
    }
}
</style>
